<template>
    <div class="userMage">
        <div class="search">
            <el-form :model="serchForm" :inline="true" class="demo-form-inline">
                <el-row :gutter="20" style="width:100%">
                    <el-col :span="6">
                        <el-form-item label="用户名称：">
                            <el-input v-model="serchForm.username" placeholder="请输入用户名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号码：">
                            <el-input v-model="serchForm.phone" placeholder="请输入手机号码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-button type="primary">查询</el-button>
                        <el-button >重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="table">
            <div style="margin-bottom:20px">
                <el-button type="primary" @click="showAddDialog">新增账号</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" height="530">
                <el-table-column type="index" label="序号" width="100px" align="center" />
                <el-table-column prop="userName" label="用户名" width="160"/>
				<el-table-column prop="sex" label="性别" align="center" />
                <el-table-column prop="phone" label="电话号码" />
                <el-table-column prop="addTime" label="创建时间" />
                <el-table-column label="操作" align="center" width="260px">
                    <template #default="scope">
                        <el-button type="text" @click="showEditUser(scope.row)">编辑</el-button>
                        <el-button type="text" @click="delUser(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
		<div class="page" style="height:100px">
			<el-pagination background 
				layout="prev, pager, next"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:total="total"
				:page-size='10'
				:current-page="currentPage"
			/>
		</div>
		
        <!-- 新增 -->
        <el-dialog v-model="showAdd" title="新增账号" width="480px">
            <el-form ref="formadd" :model="form" :inline="true" class="addFrom" label-position="right" label-width="100px">
                <el-form-item label="用户名称：" >
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别：" >
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="密码：" >
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showAdd = false">取消</el-button>
                    <el-button type="primary" @click="showAddUser">确定</el-button>
                </span>
            </template>
        </el-dialog>
         <!-- 编辑 -->
        <el-dialog v-model="showEdit" title="编辑账号" width="480px">
            <el-form ref="formbj" :model="form" :inline="true" class="addFrom" label-position="right" label-width="100px">
                <el-form-item label="用户名称：">
                    <el-input v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别：">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="密码：">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showEdit = false">取消</el-button>
                    <el-button type="primary" @click="editSave">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
   
</template>

<script>
	import {addUser, getUserList, editUserMsg, deleteUser} from '../../request/api/userMage/userMage.js'
	import {getCurrentTime} from '../../utils/index.js'
	import { ElMessage, ElMessageBox } from 'element-plus'
	
    export default {
        name: 'UserList',
        data() {
            return {
                showAdd: false,
                showEdit: false,
                serchForm: {
                    username: '',
                    phone: ''
                },
				currentPage: 1, // 当前页
				pageSize: 10, // 每页显示14条数据
				total: 0,
                tableData: [
                    // {
					// 	userName: 'admin',
					// 	sex: '男',
                    //     phone: '18752364562',
                    //     addTime: 'No. 189, Grove St, Los Angeles',
                    // },
                    // {
					// 	userName: 'admin123',
					// 	sex: '男',
                    //     phone: '13456235689',
                    //     addTime: 'No. 189, Grove St, Los Angeles',
                    // }
                ],
                form: {
                    userName: '',
                    phone: '',
                    sex: '',
                    password: '',
                    // userImg: 'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%A4%B4%E5%83%8F&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=813517666,2957725341&os=1625438460,4249586146&simid=813517666,2957725341&pn=60&rn=1&di=7060663421280190465&ln=1980&fr=&fmq=1649064781682_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fc-ssl.duitang.com%252Fuploads%252Fitem%252F202002%252F09%252F20200209142515_tgjnt.thumb.400_0.jpeg%26refer%3Dhttp%253A%252F%252Fc-ssl.duitang.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1651656781%26t%3D166d2caf3c5bb3a918f9ad29f55990a4&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwzLDEsNSwyLDcsNiw0LDgsOQ%3D%3D'
                },
				loading: false,
                TableHeight: '0'
            }
        },
		created() {
			this.getUserLists()
		},
		mounted() {
		},
        methods: {
			
			// 获取用户列表
			getUserLists() {
				this.loading = true
				getUserList({
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
				.then(res => {
					if (res.data) {
					    if (res.data.code == 0) {
					        let list = res.data.userList
							this.tableData = list.filter(i => i.userName != 'admin')
							this.total = res.data.total
							this.loading = false
					    }
					} else {
					    this.$message({
					        message: res.msg,
					        type: 'warning'
					    })
                        this.loading = false
					}
				})
				.catch(err => {this.loading = false})
			},
			// 点击新增按钮
			showAddDialog() {
				this.showAdd = true
				for (let item in this.form) {
					this.form[item] = ''
				}
			},
			// 确认新增
            showAddUser(){
                this.showAdd = false
				this.loading = true
				this.form['addTime'] = getCurrentTime()
				addUser(this.form)
				.then(res => {
					if (res.data) {
					    if (res.data.code == 0) {
							this.$message({
							    message: "新增成功",
							    type: 'success'
							})
					        this.getUserLists()
							this.loading = false
					    }
					} else {
					    this.$message({
					        message: res.msg,
					        type: 'warning'
					    })
					}
				})
				.catch(err => {})
            },
			// 点击编辑
            showEditUser(row){
                this.showEdit = true
				this.form['userName'] = row.userName
				this.form['phone'] = row.phone
				this.form['sex'] = row.sex
				this.form['password'] = row.password
				this.form['_id'] = row._id
            },
			// 编辑完确认
			editSave() {
				this.showEdit = false
				editUserMsg(this.form)
				.then(res => {
					if (res.data) {
					    if (res.data.code == 0) {
							this.$message({
							    message: "修改成功",
							    type: 'success'
							})
					        this.getUserLists()
					    }
					} else {
					    this.$message({
					        message: res.msg,
					        type: 'warning'
					    })
					}
				})
				.catch(err => {})
			},
			// 删除
			delUser(row) {
				ElMessageBox.confirm(
				    '是否确认删除?',
				    'Warning',
				    {
				        confirmButtonText: '确定',
				        cancelButtonText: '取消',
				        type: 'warning',
				    }
				)
				.then(() => {
					deleteUser({_id: row._id})
					.then(res => {
						if (res.data) {
						    if (res.data.code == 0) {
								ElMessage({
									type: 'success',
									message: '删除完成',
								})
						        this.getUserLists()
						    }
						} else {
						    this.$message({
						        message: res.msg,
						        type: 'warning'
						    })
						}
					})
					.catch(err => {})
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '删除取消',
					})
				})
				
			},
			handleSizeChange(val) {
				
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.getUserLists()
			}
        }
    }
</script>

<style lang="scss" scoped>
.userMage {
   width: 100%;
	height: 100%;
    background-color: #F1F5F9 !important;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
    // overflow-y: scroll;
	.search {
		flex: 3;
        margin-bottom: 8px;
        overflow: hidden;
        background-color: #fff;
        border-radius: 4px;
		padding: 12px;
		min-height: 50px;
		max-height: 50px;
		.el-form {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 50px;
			.el-form-item {
				display: flex;
				--font-size: 14px;
				margin-bottom: 0px; 
			}
		}
	}
	.table {
		flex: 16;
		// border: 1px solid #e0e0e0;
		padding: 12px;
        border-radius: 4px;
        background-color: #fff;
	}
    .page {
		flex: 1;
		padding: 12px;
        background-color: #fff;
        box-sizing: border-box;
        .el-pagination {
           float: right;
        }
	}
}
.addFrom {
    width: 100%;
    .el-form-item {
        width: 95%;
        .el-select{
            width: 100%;
        }
    }
}
</style>
